export const useElementSizes = (elementRef: Ref<HTMLElement | undefined>) => {
    const width = ref(0)
    const height = ref(0)

    const updateSize = () => {
        if (elementRef.value) {
            width.value = elementRef.value.offsetWidth
            height.value = elementRef.value.offsetHeight
        }
    }

    onMounted(() => {
        updateSize()
        window.addEventListener('resize', updateSize)
    })

    onUnmounted(() => {
        window.removeEventListener('resize', updateSize)
    })

    watchEffect(updateSize)

    return { elementRef, width, height }
}
